<template>
  <div id="app" class="app-v1" data-v-66bd1e0b>
    <div class="video-container-v1" style="padding-top:20px;" data-v-66bd1e0b>
      <div class="left-container scroll-sticky" data-v-66bd1e0b>
        <videotitle :video="this.video" />
        <videodetail :video="this.video" />
        <videodown :video="this.video" />
        <comment :forCommentVideo="this.forCommentVideo" />
      </div>
      <div class="right-container is-in-large-ab" data-v-66bd1e0b>
        <div class="right-container-inner scroll-sticky" data-v-66bd1e0b style>
          <up :userInfo="this.userInfo" />
          <heji :video="this.video" />
          <recommend :video="this.video" />
        </div>
      </div>
      <returnding />
    </div>
  </div>
</template>

<script>
import videotitle from "@/views/video/videotitle";
import videodetail from "@/views/video/videodetail";
import videodown from "@/views/video/videodown";
import up from "@/views/video/up";
import returnding from "@/views/video/returnding";
import recommend from "@/views/video/recommend";
import heji from "@/views/video/heji";
import comment from "@/views/video/comment";
export default {
  name: "videoplay",
  data() {
    return {
      videoId: this.$route.params.videoId,
      video: "",
      forCommentVideo: {
        videoInfo: "",
        commentList: {},
        loginUser: "",
        total: ""
      }, //专门传值给commment组件的对象,包含video对象和comment对象
      userInfo: {
        user: "",
        subscribe: ""
      }
    };
  },
  components: {
    videotitle,
    videodetail,
    videodown,
    up,
    returnding,
    recommend,
    heji,
    comment
  },
  created() {
    this.getVideo();
  },

  methods: {
    getLoginUser() {
      this.axios({
        method: "get",
        params: {},
        url: "http://localhost:8090/user/getLoginUser"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.forCommentVideo.loginUser = res.data;
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },
    getCommmentList() {
      this.axios({
        method: "post",
        params: {
          videoId: this.video.videoId,
          upId: this.video.upId,
          currentPage: "1",
          pageSize: "10"
        },
        url: "http://localhost:8095/comment/getCommentByCondition"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.forCommentVideo.commentList = res.data.records;
          this.forCommentVideo.total = res.data.total;
          console.log(
            "this.forCommentVideo.commentList",
            this.forCommentVideo.commentList
          );
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },
    saveHistory() {
      this.axios({
        method: "post",
        params: {
          videoId: this.video.videoId,
          upId: this.video.upId,
          videoTitle: this.video.videoTitle
        },
        url: "http://localhost:8096/history/saveOrUpdateHistory"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          res.data;
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },
    getVideo() {
      console.log("this.videoId", this.videoId);
      this.axios({
        method: "get",
        params: {
          id: this.videoId
        },
        url: "http://localhost:8094/video/getVideo"
      })
        .then(res => {
          this.video = res.data;
          console.log("this.video", this.video);
          var partName = this.video.videoPartition;
          var partNameIds = this.video.videoPartitionIds;
          var partNameIdsList = [];
          var partNameList = [];
          for (var i = 0; i < partName.split("、").length; i++) {
            if (
              partName.split("、")[i] !== null &&
              partName.split("、")[i] !== ""
            ) {
              partNameList.push(partName.split("、")[i]);
            }
          }
          for (var i = 0; i < partNameIds.split(",").length; i++) {
            if (
              partNameIds.split(",")[i] !== null &&
              partNameIds.split(",")[i] !== ""
            ) {
              partNameIdsList.push(partNameIds.split(",")[i]);
            }
          }
          this.video.videoPartitionIds = partNameIdsList;
          this.video.videoPartition = partNameList;
          this.forCommentVideo.videoInfo = this.video;
          this.getUserById(this.video.upId);
          this.getRelateation();
          this.getLoginUser();
          this.getCommmentList();
          this.saveHistory();
        })
        .catch(e => {
          this.$message.error("获取数据失败" + e.response.data.message);
        });
    },
    getRelateation() {
      console.log("getRelateation=>this.userInfo", this.video.upId);
      this.axios({
        method: "get",
        params: {
          upId: this.video.upId
        },
        url: "http://localhost:8097/subscribe/getSubscribeByUpId"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据

          this.userInfo.subscribe = res.data;
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });

      console.log("getRelateation=>this.userInfo", this.userInfo);
    },
    getUserById(id) {
      this.axios({
        method: "get",
        params: {
          id: id
        },
        url: "http://localhost:8090/user/get"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据

          this.userInfo.user = res.data;
          this.userInfo.user.userAvatar = "http://" + res.data.userAvatar;

          // console.log("getUserById=>res.data", res.data);
        })
        .catch(error => {
            console.log("getUserById=>error.response.data.message", error.response.data.message);
          this.$message.error(error.response.data.message);
        });
          console.log("getUserById=>this.userInfo", this.userInfo);
    }
  }
};
</script>
<style   scoped>
@import "//s1.hdslb.com/bfs/static/jinkela/video/css/stardust-video.0.330646031e194b46a6edd1c433adc009c0d33955.css";
#app {
  width: 80%;
}
</style>